<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小说转漫画生成器</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/responsive.css">
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>小说转漫画生成器</h1>
            <p>将您的小说文本自动转换为精彩的漫画</p>
        </header>

        <main class="main-content">
            <!-- 输入区域 -->
            <section class="input-section">
                <div class="input-methods">
                    <div class="method-tabs">
                        <button class="tab-btn active" data-tab="text">文本输入</button>
                        <button class="tab-btn" data-tab="file">文件上传</button>
                    </div>

                    <div class="tab-content">
                        <!-- 文本输入 -->
                        <div id="text-tab" class="tab-pane active">
                            <textarea id="novel-text" placeholder="请输入或粘贴您的小说文本...（建议500-5000字）" rows="12"></textarea>
                            <div class="text-stats">
                                <span>字数: <span id="word-count">0</span></span>
                                <span>场景预估: <span id="scene-estimate">0</span></span>
                            </div>
                        </div>

                        <!-- 文件上传 -->
                        <div id="file-tab" class="tab-pane">
    <div class="file-upload-area" id="file-upload-area" 
         title="点击选择文件或拖拽文件到这里" 
         role="button" 
         aria-label="文件上传区域">
        <div class="upload-placeholder">
            <i class="upload-icon" aria-hidden="true">📁</i>
            <p>点击选择文件或拖拽文件到这里</p>
            <span class="file-types">支持 .txt, .doc, .docx 格式</span>
        </div>
        <input type="file" 
               id="file-input" 
               accept=".txt,.doc,.docx" 
               title="选择小说文件" 
               aria-label="选择小说文件"
               hidden>
    </div>
    <div class="file-info" id="file-info" style="display: none;">
        <div class="file-details">
            <span id="file-name" aria-live="polite"></span>
            <button id="remove-file" 
                    class="btn-remove" 
                    title="移除文件"
                    aria-label="移除文件">×</button>
        </div>
        <div class="file-preview">
            <pre id="file-content-preview"></pre>
        </div>
    </div>
</div>
                    </div>
                </div>

                <!-- 风格选择 -->
                <div class="style-selection">
                    <h3>漫画风格选择</h3>
                    <div class="style-options">
                        <label class="style-option">
                            <input type="radio" name="comic-style" value="manga" checked>
                            <div class="style-card">
                                <div class="style-preview manga-preview"></div>
                                <span>日式漫画</span>
                            </div>
                        </label>
                        <label class="style-option">
                            <input type="radio" name="comic-style" value="manhua">
                            <div class="style-card">
                                <div class="style-preview manhua-preview"></div>
                                <span>中式漫画</span>
                            </div>
                        </label>
                        <label class="style-option">
                            <input type="radio" name="comic-style" value="webtoon">
                            <div class="style-card">
                                <div class="style-preview webtoon-preview"></div>
                                <span>网络条漫</span>
                            </div>
                        </label>
                        <label class="style-option">
                            <input type="radio" name="comic-style" value="american">
                            <div class="style-card">
                                <div class="style-preview american-preview"></div>
                                <span>美式漫画</span>
                            </div>
                        </label>
                    </div>
                </div>

                <!-- 生成按钮 -->
               <div class="generate-section">
    <button id="generate-btn" class="btn-generate" disabled>
        <span class="btn-text">请输入小说文本</span>
        <div class="loading-spinner" style="display: none;"></div>
    </button>
</div>
            </section>

            <!-- 进度显示 -->
            <section id="progress-section" class="progress-section" style="display: none;">
                <h3>生成进度</h3>
                <div class="progress-container">
                    <div class="progress-bar">
                        <div class="progress-fill" id="progress-fill"></div>
                    </div>
                    <div class="progress-text">
                        <span id="progress-text">准备中...</span>
                        <span id="progress-percent">0%</span>
                    </div>
                </div>
                <div class="progress-details">
                    <div class="progress-step">
                        <span class="step-icon">📖</span>
                        <span class="step-text">分析小说文本</span>
                        <span class="step-status" id="step-analyze">等待</span>
                    </div>
                    <div class="progress-step">
                        <span class="step-icon">🎨</span>
                        <span class="step-text">生成场景描述</span>
                        <span class="step-status" id="step-scenes">等待</span>
                    </div>
                    <div class="progress-step">
                        <span class="step-icon">🖼️</span>
                        <span class="step-text">生成漫画图像</span>
                        <span class="step-status" id="step-images">等待</span>
                    </div>
                    <div class="progress-step">
                        <span class="step-icon">📚</span>
                        <span class="step-text">组合漫画页面</span>
                        <span class="step-status" id="step-combine">等待</span>
                    </div>
                </div>
            </section>

            <!-- 结果展示 -->
            <section id="result-section" class="result-section" style="display: none;">
                <div class="result-header">
                    <h3>生成的漫画</h3>
                    <div class="result-actions">
                        <button id="download-all" class="btn-secondary">下载全部</button>
                        <button id="regenerate" class="btn-secondary">重新生成</button>
                    </div>
                </div>
                <div class="comic-viewer" id="comic-viewer">
                    <!-- 漫画页面将通过JS动态加载 -->
                </div>
            </section>
        </main>

        <footer class="footer">
            <p>© 2026 小说转漫画生成器 | 基于AI技术驱动</p>
        </footer>
    </div>

    <!-- 加载脚本 -->
    <script src="js/file-upload.js"></script>
    <script src="js/comic-renderer.js"></script>
    <script src="js/main.js"></script>
</body>
</html>